import React, {useState, useMemo, useEffect, useRef} from 'react'
import {Table, Button, Tag, message, Modal, Image, Space} from 'antd'
import {
    CheckCircleOutlined,
    MailOutlined,
    VerticalAlignBottomOutlined,
    CloseCircleOutlined,
    DownloadOutlined
} from '@ant-design/icons'
import Filter from './Filter'
import Container from '@/appComponents/Container'
import ConText from './ConText'
import ModerOther from './ModerOther'
import ModerFeed from './ModerFeed'
import ShareValueSingle from './ShareValueSingle'
import {
    getClueList,
    postWarnClueAssign,
    postWarnClueClose,
    getClueDelete //线索删除
} from '&/api/electricity'
import TagCompent from '@/appComponents/TagCompent'
import SpanNum from '@/appComponents/SpanNum'
import downloadExcelImg from '&/commonjs/downloadExcelImg'
import dayjs from 'dayjs'
import './index.scss'
import {useTableData} from '&/hooks'

const MatterList = () => {
    const [confirmLoading, setConfirmLoading] = useState(false)
    const value = JSON.parse(localStorage.getItem('user'))
    const [checkStrictly, setCheckStrictly] = useState(false)
    const [listArr, setListArr] = useState([])
    const [mode, setMode] = useState()
    const shareRef = useRef()
    const [isModalOpen, setIsModalOpen] = useState(false)
    const [selectedRowKeys, setSelectedRowKeys] = useState([])
    const [jsonValue, setJsonValue] = useState([])
    const [newRecordData, setNewRecordData] = useState([])
    const [visible, setVisible] = useState(false)
    const [feedVisible, setFeedVisible] = useState(false) //反馈弹窗
    const [records, setRecords] = useState() //点击详情所拿到的数据
    const [recordSing, setRecordSing] = useState() //点击详情所拿到的数据
    const [feedRecord, setFeedRecord] = useState() //点击已反馈所拿到的数据
    const [clickType, setClickType] = useState()
    const [downLoading, setDownLoading] = useState(false)

    const [paramsData, setParamsData] = useState({
        start_time: dayjs().subtract(1, 'd').format('YYYY-MM-DD 00:00:00'),
        end_time: dayjs().format('YYYY-MM-DD 23:59:59'),
        adm_id: value?.adm_id,
        ent_name: '',
        userid: value?.userid,
        role_level: value?.role_level,
        assign_status: '-1',
        feedback_status: '-1',
        page: 1,
        page_size: 10
    })

    const json = useMemo(() => {
        let newParamsData = {}
        for (let key in paramsData) {
            if (paramsData[key] != (-1 || '-1')) {
                newParamsData[key] = paramsData[key]
            }
        }
        return newParamsData
    }, [paramsData.assign_status, paramsData.feedback_status])

    const rowSelection = {
        selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
            setSelectedRowKeys(selectedRowKeys)
            const arr = selectedRows.map((item) => {
                return item.clue_code
            })
            setListArr(arr)
            setNewRecordData(selectedRows)
        }
    }

    const [tableData, pagination, loading, onQuery, onReload, , loadDataAll] =
        useTableData(getClueList, {
            params: json
            // formatcb: (data) => formatData(data)
        })

    // 单个点击下发
    const handClickXiaFa = (text, type) => {
        setClickType(type)
        const newArr = []
        newArr.push(text)
        setRecordSing(text)
        setNewRecordData(newArr)
        setIsModalOpen(true)
        setMode('1')
    }
    //批量点击下发
    const handClickAllXiaFa = async (type) => {
        setClickType(type)
        // if (selectedRowsData.length) {
        setIsModalOpen(true)
        // setNewRecordData(selectedRowsData)
        setMode('3')
        // }
    }
    // 点击详情
    const handClickDeile = (data) => {
        setRecords(data)
        setVisible(true)
    }
    // 单个点击关闭
    const handClickClose = (text) => {
        // setIsModalOpen(true)
        setMode('2')
        Confirm('2', text)
    }
    //批量点击关闭
    const handClickAllClose = async () => {
        // setIsModalOpen(true)
        setMode('4')
        Confirm('4')
    }
    // 下发接口
    const postWarnRequest = async (jsonP) => {
        const {data} = await postWarnClueAssign(jsonP)
        if (data.code == 2000) {
            message.success(data.result)
            onReload()
        } else {
            message.error('下发失败')
        }
    }
    //关闭接口
    const postWarnClueCloseRequest = async (jsonP) => {
        const {data} = await postWarnClueClose(jsonP)
        if (data.code == 2000) {
            message.success(data.result)
            onReload()
        } else {
            message.error('下发失败')
        }
    }
    const Confirm = (modes, text) => {
        let newARR = []
        let formData
        switch (modes) {
            case '1':
                // 暂时这样处理
                // setTimeout(() => {
                //   const dataurl = instance.getDataURL({
                //     type: 'png'
                //   })
                //   if (dataurl) setConfirmLoading(false)
                //   const filedata = dataURLtoFile(dataurl, '线索下发图片')
                //   // console.log(    dataURLtoFile(dataurl, '线索下发图片'),"1111111111111111111");
                //   jsonValue.map((item) => {
                //     newARR.push(item.clue_codes)
                //   })
                //   formData = new FormData()
                //   formData.append('userid', value?.userid)
                //   formData.append('clue_codes', JSON.stringify(newARR))
                //   formData.append('assign_to', jsonValue[0]?.assign_to)
                //   formData.append('description', jsonValue[0]?.description)
                //   formData.append('file', filedata)
                //   postWarnRequest(formData)
                //   setIsModalOpen(false)
                //   //清除掉选中的key
                //   setSelectedRowKeys([])
                // }, 1000)

                jsonValue.map((item) => {
                    newARR.push(item.clue_codes)
                })
                formData = new FormData()
                formData.append('userid', value?.userid)
                formData.append('clue_codes', JSON.stringify(newARR))
                formData.append('assign_to', jsonValue[0]?.assign_to)
                // formData.append('description', jsonValue[0]?.description)
                // formData.append('file', filedata)
                postWarnRequest(formData)
                setIsModalOpen(false)
                //清除掉选中的key
                setSelectedRowKeys([])
                // onQuery(paramsData)
                break
            case '2':
                // 点击关闭时
                // let newARR = []
                newARR.push(text.clue_code)
                formData = new FormData()
                formData.append('userid', value?.userid)
                formData.append('clue_code', JSON.stringify(newARR))
                postWarnClueCloseRequest(formData)
                setSelectedRowKeys([])
                // onQuery(paramsData)
                break
            case '3':
                jsonValue.map((item) => {
                    newARR.push(item.clue_codes)
                })
                formData = new FormData()
                formData.append('userid', value?.userid)
                formData.append('clue_codes', JSON.stringify(newARR))
                formData.append('assign_to', jsonValue[0]?.assign_to)
                postWarnRequest(formData)
                // onQuery(paramsData)
                setIsModalOpen(false)
                //清除掉选中的key
                setSelectedRowKeys([])
                break
            case '4':
                // 点击批量关闭时
                if (listArr.length > 0) {
                    formData = new FormData()
                    formData.append('userid', value?.userid)
                    formData.append('clue_code', JSON.stringify(listArr))
                    postWarnClueCloseRequest(formData)
                    // onQuery(paramsData)
                    setSelectedRowKeys([])
                }
        }
        return
    }
    const handleOk = async () => {
        // setIsModalOpen(false);//关闭弹窗
        // 点击下发时
        if (mode == '1') {
            // if (jsonValue.length > 0 && instance) {
            //   setConfirmLoading(true)
            //   Confirm('1')
            // }
            if (jsonValue.length > 0) {
                // setConfirmLoading(true)
                Confirm('1')
            }
        } else if (mode == '3') {
            if (jsonValue.length > 0) {
                Confirm('3')
            }
        }
    }
    const handleCancel = () => {
        setIsModalOpen(false)
    }
    const handleShare = (value) => {
        setJsonValue(value)
    }
    const handClickDelet = async (values) => {
        const formdata = new FormData()
        formdata.append('userid', value?.userid)
        formdata.append('clue_code', JSON.stringify([values?.clue_code]))
        const res = await getClueDelete(formdata)
        message.success(res?.data.result)
        onReload()
    }
    const columns = [
        {
            title: '序号',
            width: 50,
            render: (text, item, index) => {
                return index + 1
            },
            align: 'center'
        },
        {
            title: '企业名称',
            dataIndex: 'ent_name',
            key: 'ent_name',
            align: 'center',
            width: 150
        },
        {
            width: 100,
            title: '编号',
            dataIndex: 'clue_code',
            key: 'clue_code',
            align: 'center',
            render: (_, record) => {
                return (
                    <div style={{textAlign: 'center'}}>
                        <div>{_}</div>
                    </div>
                )
            }
        },
        {
            title: '下发次数',
            dataIndex: 'clue_history_counts', // 这里指定了数据对象的键名
            key: 'clue_history_counts', // 这里是唯一键，通常和dataIndex保持一致
            align: 'center',
            width:80
        },

        {
            title: '问题描述',
            dataIndex: 'desc',
            key: 'desc',
            align: 'center',
            width: 700,
            render: (text) => {
                if (text) {
                    return (
                        <div
                            style={{
                                // overflowY: 'auto',
                                // maxHeight: '240px',
                                display: 'flex',
                                justifyContent: 'left',
                                alignItems: 'center'
                            }}
                        >
                            <ConText data={text}></ConText>
                        </div>
                    )
                }
            }
        },
        {
            title: '触发点位',
            dataIndex: 'dev_name',
            key: 'dev_name',
            align: 'center',
            width: 120,
            render: (text, record) => {
                return (
                    <div className="dev_name">
                        {record?.content.map((item) => {
                            return (
                                <div
                                    style={{
                                        padding: '5px',
                                        height: '50px',
                                        borderBottom: '1px solid #f0f0f0'
                                    }}
                                >
                                    {item.dev_name}
                                </div>
                            )
                        })}
                    </div>
                )
            }
        },
        {
            title: '开始时间',
            dataIndex: 'start_time',
            key: 'start_time',
            align: 'center',
            width: 140,
            render: (text, record) => {
                return (
                    <div className="start_time">
                        {record?.content.map((item) => {
                            return (
                                <div
                                    style={{
                                        padding: '5px',
                                        height: '50px',
                                        borderBottom: '1px solid #f0f0f0'
                                    }}
                                >
                                    {item.start_time}
                                </div>
                            )
                        })}
                    </div>
                )
            }
        },
        {
            title: '结束时间',
            dataIndex: 'end_time',
            key: 'end_time',
            align: 'center',
            width: 140,
            render: (text, record) => {
                return (
                    <div className="end_time">
                        {record?.content.map((item) => {
                            return (
                                <div
                                    style={{
                                        padding: '5px',
                                        height: '50px',
                                        borderBottom: '1px solid #f0f0f0'
                                    }}
                                >
                                    {item.end_time}
                                </div>
                            )
                        })}
                    </div>
                )
            }
        },
        {
            title: '总持续时长',
            dataIndex: 'total_duration',
            key: 'total_duration',
            align: 'center',
            width: 140,
            render: (text, record) => {
                return (
                    <div className="total_duration">
                        {record?.content.map((item) => {
                            return (
                                <div
                                    style={{
                                        padding: '5px',
                                        height: '50px',
                                        borderBottom: '1px solid #f0f0f0',
                                        display: 'flex',
                                        justifyContent: 'center',
                                        alignItems: 'center'
                                    }}
                                >
                                    {item.total_duration}
                                </div>
                            )
                        })}
                    </div>
                )
            }
        },
        {
            title: '报警次数',
            dataIndex: 'warn_count',
            key: 'warn_count',
            align: 'center',
            width: 120,
            render: (text, record) => {
                return <SpanNum record={record}></SpanNum>
            }
        },
        {
            title: '最高报警级别',
            dataIndex: 'highest_level',
            key: 'highest_level',
            align: 'center',
            width: 120,
            render: (text, record) => {
                return <TagCompent record={record}></TagCompent>
            }
        },
        {
            title: '报警类型',
            dataIndex: 'warn_type_name',
            key: 'warn_type_name',
            align: 'center',
            width: 120,
            render: (text, record) => {
                return (
                    <div className="warn_type_name">
                        {record?.content.map((item) => {
                            return (
                                <div
                                    style={{
                                        padding: '5px',
                                        height: '50px',
                                        borderBottom: '1px solid #f0f0f0'
                                    }}
                                >
                                    {item.warn_type_name}
                                </div>
                            )
                        })}
                    </div>
                )
            }
        },
        {
            title: '下发状态',
            dataIndex: 'assign_status',
            key: 'assign_status',
            align: 'center',
            width: 80,
            render: (text) => {
                const color = text == 0 ? 'red' : 'green'
                return <Tag color={color}>{text == 0 ? '未下发' : '已下发'}</Tag>
            }
        },
        // {
        //   title: '反馈状态',
        //   dataIndex: 'feedback_status',
        //   key: 'feedback_status',
        //   align: 'center',
        //   width: 120,
        //   render: (text, record) => {
        //     const color = text == 0 ? 'red' : 'green'
        //     return (
        //       <>
        //         <Tag color={color}>{text == 0 ? '未反馈' : '已反馈'}</Tag>
        //         {/* <MailOutlined /> */}
        //         {text !== 0 ? (
        //           <Button
        //             // disabled={true}
        //             size="small"
        //             type="primary"
        //             shape="circle"
        //             icon={<MailOutlined />}
        //             onClick={() => {
        //               setFeedVisible(true)
        //               setFeedRecord(record)
        //             }}
        //           ></Button>
        //         ) : null}
        //       </>
        //     )
        //   }
        // },
        {
            title: '备注',
            dataIndex: 'comment',
            key: 'comment',
            align: 'center',
            width: 150
        },
        {
            title: '备注图片',
            dataIndex: 'files',
            key: 'files',
            align: 'center',
            type: 'image',
            width: 150,
            render: (value, row, index) => {
                return (
                    <span>
            {/* <Image.PreviewGroup
              items={value}
            > */}
                        <Image width={150} src={value[value?.length - 1]}/>
                        {/* </Image.PreviewGroup> */}
          </span>
                )
            }
        },
        {
            title: '操作',
            align: 'center',
            width: 220,
            fixed: 'right',
            render: (_, record) => {
                return (
                    <Space>
                        <Button
                            type="primary"
                            size="small"
                            onClick={() => handClickXiaFa(record, 'single')}
                            icon={<VerticalAlignBottomOutlined/>}
                            disabled={
                                record.is_closed == 0 && record.assign_status == 0
                                    ? false
                                    : true
                            }
                        >
                            下发
                        </Button>
                        <Button
                            type="primary"
                            size="small"
                            onClick={() => handClickDelet(record)}
                            // disabled={record.is_closed == 0 ? false : true}
                        >
                            删除
                        </Button>
                        {/* <Button
              type="primary"
              size="small"
              onClick={() => handClickDeile(record)}
              // disabled={record.is_closed == 0 ? false : true}
            >
              详情
            </Button> */}
                    </Space>
                )
            }
        }
    ]
    const handleText = () => {
        return (
            <div>
                <icon>
                    <CheckCircleOutlined></CheckCircleOutlined>
                </icon>
                {' '}
                确认
            </div>
        )
    }
    const handleCancelText = () => {
        return (
            <div>
                <icon>
                    <CloseCircleOutlined></CloseCircleOutlined>
                </icon>
                {' '}
                取消
            </div>
        )
    }
    const handleValue = (modes) => {
        switch (modes) {
            case '1':
                return '请选择下发用户'
            case '2':
                return '关闭'
            case '3':
                return '请选择批量下发用户'
            case '4':
                return '批量关闭'
        }
    }
    const formatExeclData = (data) => {
        const cloneData = data.map((item) => {
            const [{warn_count, warn_type_name}] = item.content || []
            return {
                ...item,
                feedback_status: item.feedback_status == 0 ? '未反馈' : '已反馈',
                assign_status: item.assign_status == 0 ? '已下发' : '已下发',
                warn_count,
                warn_type_name,
                total_duration: item.warn_duration
            }
        })
        var items = []
        if (listArr.length) {
            items = cloneData.filter((d) => listArr.includes(d.clue_code))
        } else {
            items = cloneData
        }
        return items
    }
    const download = async () => {
        setDownLoading(true)
        const data = await loadDataAll()
        const execlData = formatExeclData(data)
        downloadExcelImg(execlData, columns, '问题清单列表', {
            imageSize: [200, 200],
            tdHeight: 260
        })
        setDownLoading(false)
    }
    return (
        <div className="MatterList">
            <Container>
                <Container.ContainerQuery title="查询条件">
                    <div className="MatterList-top">
                        <div>
                            <Filter
                                onQuery={onQuery}
                                paramsData={paramsData}
                                setParamsData={setParamsData}
                            />
                        </div>
                    </div>
                </Container.ContainerQuery>
                <Container.ContainerContent
                    title="查询结果"
                    extra={
                        <Space>
                            <Button
                                type="primary"
                                onClick={() => handClickAllXiaFa('all')}
                                disabled={selectedRowKeys.length > 0 ? false : true}
                                icon={<VerticalAlignBottomOutlined/>}
                            >
                                批量下发
                            </Button>

                            <Button
                                type="primary"
                                danger
                                disabled={selectedRowKeys.length > 0 ? false : true}
                                onClick={handClickAllClose}
                                icon={<CloseCircleOutlined/>}
                            >
                                批量关闭
                            </Button>
                            <Button
                                type="primary"
                                loading={downLoading}
                                disabled={!tableData.length}
                                icon={<DownloadOutlined/>}
                                onClick={async () => {
                                    await download()
                                }}
                            >
                                导出
                            </Button>
                        </Space>
                    }
                >
                    <Table
                        bordered
                        tableLayout="fixed"
                        loading={loading}
                        columns={columns}
                        dataSource={tableData}
                        size="small"
                        rowSelection={{
                            ...rowSelection,
                            checkStrictly
                        }}
                        rowKey={(row) => {
                            return JSON.stringify(row)
                        }}
                        pagination={pagination}
                        scroll={{
                            y: '62vh'
                        }}
                    />
                    <Modal
                        title={handleValue(mode)}
                        destroyOnClose={true}
                        open={isModalOpen}
                        onOk={handleOk}
                        confirmLoading={confirmLoading}
                        onCancel={handleCancel}
                        centered={true}
                        width={400}
                        // width={clickType == 'all' ? 400 : 600}
                        okText={handleText()}
                        cancelText={handleCancelText()}
                    >
                        <div>
                            {/* {clickType == 'all' ? ( */}
                            <ShareValueSingle
                                ref={shareRef}
                                handleShare={handleShare}
                                newRecordData={newRecordData}
                            ></ShareValueSingle>
                            {/* ) : (
                <ShareValue
                  // ref={shareRef}
                  handleShare={handleShare}
                  newRecordData={newRecordData}
                  recordSing={recordSing}
                  setInstance={setInstance}
                ></ShareValue>
              )} */}
                        </div>
                    </Modal>
                    <ModerOther
                        visible={visible}
                        setVisible={setVisible}
                        records={records}
                    />
                    <ModerFeed
                        visible={feedVisible}
                        setVisible={setFeedVisible}
                        records={feedRecord}
                    ></ModerFeed>
                </Container.ContainerContent>
            </Container>
        </div>
    )
}
export default MatterList
